<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
    <div id="app">
      <h2>{{title}}</h2>
      <button @click="num++">点击</button>
      <span>{{str}}</span>
      <br>
      <input type="text" v-model="fName"/>
      <input type="text" v-model="lName"/>
      <span>{{name}}</span>
    </div>
	</body>
  <script src="../vue.js"></script>
  <script>
    new Vue({
      el:"#app",
      data:{
        title:"侦听器",
        num:0,
        fName:"",
        lName:"",
        name:""
      },
      computed:{
        // 自身就是数据,需要有一个依赖的数据,才能做到:数据改变,重新计算
        str(){
          console.log("计算属性")
          return `点击了`
        },
        // name(){
        //   return this.fName + this.lName;
        // }
      },
      watch:{
        // 数据自身只要发生变化,就会触发侦听器
        num(newVal, oldVal){
          console.log("num改变了:", oldVal, newVal)
        },
        fName(n, o){
          this.name = n + this.lName;
        },
        lName(n, o){
          this.name = this.fName + n;
        }
      }
    })
  </script>
</html>
